<template>
    <div>
        <el-card class="box-card aside-div">
            <avue-data-operatext :option="option"></avue-data-operatext>
            <div style="text-align: center;margin-top: 15px;">
                <el-row>
                    <el-col :span="12"><el-link type="info">排名：{{rankings === 0 ? '未上榜': rankings}}</el-link></el-col>
                    <el-col :span="12"><el-link type="info">声望：{{prestiges}}</el-link></el-col>
                </el-row>
            </div>
        </el-card>
        <el-card v-if="keys !== 'prestige' && keys !== 'follower' && keys !== 'fance' && keys !== 'collection'" class="box-card aside-div">
            <el-row>
                <el-col :span="24">
                    <el-button @click="goCrd" v-if="keys === 'blog'" style="width: 100%;" type="success" round><i class="el-icon-edit-outline"></i> 新建博文</el-button>
                    <el-button @click="goCrd" v-if="keys === 'discuss'" style="width: 100%;" type="success" round><i class="el-icon-chat-round"></i> 发起讨论</el-button>
                    <el-button @click="goCrd" v-if="keys === 'link'" style="width: 100%;" type="success" round><i class="el-icon-link"></i> 分享链接</el-button>
                    <el-button @click="goCrd" v-if="keys === 'question'" style="width: 100%;" type="success" round><i class="el-icon-question"></i> 提个问题</el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-card v-if="keys !== 'prestige' && keys !== 'follower' && keys !== 'fance' && keys !== 'collection'" class="box-card aside-div" style="min-height: 13.75rem;">
            <el-tabs v-model="activeName">
                <el-tab-pane label="最新问题" name="latest">
                    <div v-for="latest in latestData" :key="latest.id" class="q-title">
                        <el-tag>{{latest.timeshow}}</el-tag>
                        <span>{{latest.title}}</span><span v-if="latest.lead !==''"> - {{latest.lead}}</span>
                        <el-divider></el-divider>
                    </div>
                    <avue-empty v-if="latestData.length === 0"></avue-empty>
                </el-tab-pane>
                <el-tab-pane label="最受欢迎" name="loves">
                    <div v-for="love in lovesData" :key="love.id" class="q-title">
                        <el-tag><i class="el-icon-star-on"></i>{{love.favourite_count}}</el-tag>
                        <span>{{love.title}}</span><span v-if="love.lead !==''"> - {{love.lead}}</span>
                        <el-divider></el-divider>
                    </div>
                    <avue-empty v-if="lovesData.length === 0"></avue-empty>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <advSystem></advSystem>
    </div>
</template>

<script>
    import {
        getToken
    } from '../util/auth'
    import advSystem from '../components/advSystem'
    export default {
        props:["keys"],
        data() {
            return {
                zhihuUserInfo: null,
                option: {
                    span: 24,
                    data: []
                },
                rankings: 0,
                prestiges: 0,
                activeName: 'latest',
                latestData: {},
                lovesData: {},
            }
        },
        components: {
            advSystem
        },
        created() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                this.zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
            }
            this.getPersonalComponent()
            if (this.keys !== 'prestige' && this.keys !== 'follower' && this.keys !== 'fance' && this.keys !== 'collection') {
                this.getShowQuestionLimitList()
            }
        },
        methods: {
            goCrd() {
                if (this.keys === 'blog') {
                    this.$router.push({path: "/customer/blogsCrd"})
                } else if (this.keys === 'discuss') {
                    this.$router.push({path: "/customer/discussCrd"})
                } else if (this.keys === 'link') {
                    this.$router.push({path: "/customer/linksCrd"})
                } else if (this.keys === 'question') {
                    this.$router.push({path: "/customer/questionsCrd"})
                }
            },
            // 获取信息
            getPersonalComponent() {
                const _this = this
                const params = {
                    key: 'customer',
                    user_id: _this.zhihuUserInfo.id
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getPersonalComponent, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.option.data = res.data.userComponet
                            _this.rankings = res.data.customer.rankings
                            _this.prestiges = res.data.customer.prestiges
                        } else {
                            _this.option.data = {}
                            _this.rankings = 0
                            _this.prestiges = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.option.data = {}
                        _this.rankings = 0
                        _this.prestiges = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.option.data = {}
                    _this.rankings = 0
                    _this.prestiges = 0
                })
            },
            // 获取最新，最受欢迎问题列表
            getShowQuestionLimitList() {
                const _this = this
                const params = {
                    key: _this.keys,
                    user_id: _this.zhihuUserInfo.id
                }
                _this.axios.post(_this.$API.ZHIHUAPI.getShowQuestionLimitList, _this.qs.stringify(params)).then((
                    res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.latestData = res.data.latest
                            _this.lovesData = res.data.loves
                        } else {
                            _this.latestData = {}
                            _this.lovesData = {}
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.latestData = {}
                        _this.lovesData = {}
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.latestData = {}
                    _this.lovesData = {}
                })
            },
        }
    }
</script>

<style>
</style>
